Overview

The application you are developing only has one screen so far. However, more screens may be required as more features are implemented. It’s important to set up the navigation hierarchy of the application as well as the different navigation rules to navigate from one screen to another. This is done by using a combination of navigators, such as Stacks, Tabs, Drawers or Modals. In this exercise, you will set up the root navigator of the Little Lemon food ordering app.

Scenario

So far, you created the onboarding screen that lets the user register with their first name, last name and email address. However, some questions remain unanswered:

• What happens when the onboarding is completed successfully and a user quits the app?

• Where should a user navigate once the onboarding is completed?

• How will the app determine if a user has completed the onboarding successfully or not?

Prerequisites

To complete this exercise, you should have created the onboarding flow to collect basic user information such as a first name, last name and an email address.

Application screens

Before implementing navigation, let’s explore the various destinations required for the Little Lemon food ordering app. There should be three navigation destinations in your app, each represented by a Composable. These are the:

• Onboarding screen

• Home screen

• Profile screen

Users should be able to navigate between these destinations in your app. In more detail, the requirements for the navigation flow are as follows:

• On app launch, the app should navigate to the Onboarding destination if a user is logged out.

• On app launch, the app should navigate to the Home destination if a user is logged in.

• Successful registration on the Onboarding destination lets the user navigate to the Home destination.

• From the Home screen, a user must be able to navigate to the Profile destination.

• When a user presses the Back button on the Profile destination the Home destination should open.

• When a user presses the Logout button on the Profile destination the app should navigate from the Profile destination to the Onboarding destination.

The following navigation diagram illustrates these requirements:

Instructions

Step 1: Dependency

• Add the Jetpack navigation dependency androidx.navigation:navigation-compose:2.5.3 to the dependencies block in the app/build.gradle file.

Step 2: Create empty screens

• You already have the Onboarding screen in the app. Now you need to create the Composables representing the remaining app screens:

  • Under the application package name, create a new file called Home.kt . This file will hold the Home Composable representing the Home screen and its preview.

  • Under the application package name, create a new file called Profile.kt . This file will hold the Profile Composable representing the Profile screen and its preview.

Step 3: Create the destinations

• Now create the Destinations.kt file under the application package name. Inside the file, define an interface called Destinations with navigation routes.

• Create the objects for each screen by implementing the Destinations interface.

Tip: It is common practice to use the same name for the route as the Destination name, for example, Home .

Step 4: Create the Navigation Composable

• Create the NavigationComposable.kt file and define the Navigation Composable which will manage navigation within the app. Pass the navController parameter to the Navigation Composable.

• Inside the Navigation Composable, define the NavHost . Pass the navController .

• Determine the startDestination . If user data is stored in shared preferences, then the start destination is Onboarding , otherwise, the start destination is Home .

• Next, you should define navigation routes for each destination. In the MainActivity.kt file create a navController . Finally, call the MyNavigation Composable inside MainActivity and pass it to the Navigation Composable.

Tip: navController can be created by using the rememberNavController() delegate.

Step 5: Update the onboarding navigation flow

• Open the Onboarding.kt file to update the Onboarding Composable.

• Before setting up the navigation on the Onboarding screen, you need to perform a simple input validation after a user presses the register button. You need to determine if a user has entered all the required information and then the app should act accordingly:

  • If any of the input fields are empty, then the app should display this text: "Registration unsuccessful. Please enter all data."

  • If all three fields contain the required text, then save the first name, last name and email in the SharedPreferences and display the text "Registration successful!" . When a user presses the Register button they should be logged into your app and the app must navigate to the Home screen.

Tip: To implement registration validation behavior, leverage the onClick from the Button Composable.

Tip: To validate Composable text, use th e isBlank method, for example, firstName.isBlank()

As you need to navigate from the Onboarding screen to the Home screen, it is required to have the navController parameter in the Onboarding Composable to call the navigate function. To do this, add the navController parameter of the NavHostContoller type to the Onboarding screen Composable in the Onboarding.kt file. Then call the navController.navigate() function when the user input is valid.

Conclusion

In this exercise, you created an authentication flow with Jetpack Navigation to conditionally render specific screens, depending on whether the user has completed the onboarding phase or not. Furthermore, you persisted information in the disk using SharedPreferences so that when you start up the application, the previous state of the user journey across the app is remembered.